<!--我的-订单- 凭证 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getOrdApi
	} from '@/api/venue.js'
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		msgNum: 2
	})

	const voucher = ref({
		ordId: ''
	})

	onLoad((option) => {
		console.log('JSON.parse(option) ', JSON.parse(option.item));
		voucher.value = JSON.parse(option.item)
		// 订单详情
		orderDetails()

		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
	})

	// 订单详情
	const orderDetailsList = ref()

	const orderDetails = () => {
		console.log('res:===----', voucher.value);
		console.log('res:===----', voucher.value.ordId);
		getOrdApi({
			ordId: voucher.value.ordId,
		}).then(res => {
			console.log('res:===----', res);
			orderDetailsList.value = res.data
			// shopList.value = res.data
		})
	}


	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	// 前往退款页面
	const goToRefund = () => {
		uni.navigateTo({
			url: '/subPackage/my/order/refund'
		})
	}
</script>

<template>
	<view class="order-voucher-page">
		<!-- 背景图片 -->
		<image src="/static/images/my/head_bg.png" style="width: 100vw;height: 626rpx;" mode="widthFix" class="bg-img">
		</image>
		<!-- 头部内容 -->
		<view class="head-box" :style="{ 'padding-top': data.barHeight + 'px' }">
			<!-- navbar -->
			<view class="navbar" :style="{ 'height': data.navHeight + 'px' }">
				<view class="back-box" @click="goBack">
					<up-icon name="arrow-left" color="#303133" size="20"></up-icon>
				</view>
				<text>我的凭证</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content-box">
			<!-- 凭证信息 -->
			<view class="voucher-info">
				<!-- 场馆信息 -->
				<view class="venue-info">
					<view class="top">
						<view class="address-box">
							<image style="width: 24rpx; height: 24rpx;" src="/static/images/icons/icon_shop.png"
								mode="scaleToFill" />
							<text class="up-line-1">明发新城中心A1栋 · 3006号（南京工业大学地铁)</text>
						</view>
						<view class="status-box">
							待使用
						</view>
					</view>
					<!-- 场地信息 -->
					<view class="field-box">
						<view class="pic-box">
							<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
								style="width: 196rpx;height: 196rpx;" />
						</view>
						<view class="info">
							<view class="name">{{orderDetailsList.shopName}}</view>
							<view class="type">{{orderDetailsList.ordDesc}}</view>
							<view class="time">下单时间:2024.09.08 18:32</view>
						</view>
					</view>
					<!-- 支付信息 -->
					<view class="pay-info">
						<text class="label">实付：</text>
						<text class="value">￥{{orderDetailsList.actualAmount}}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="split-line"></view>
				<!-- 提示信息 -->
				<view class="tip-box">
					<text class="tip">到达门店后向店员出示该二维码！</text>
					<text class="time">09.20 23:59:59 到期</text>
				</view>
				<!-- 二维码 -->
				<view class="qrcode-box">
					<up-qrcode :size="180" val="1232321321312312312"></up-qrcode>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="info-list">
					<view class="item">
						<text class="label">下单时间：</text>
						<text class="value">2024-09-06 13:22:32</text>
					</view>
					<view class="item">
						<text class="label">下单项目：</text>
						<text class="value">TouY运动室</text>
					</view>
					<view class="item">
						<text class="label">订单号码：</text>
						<text class="value">2314 2938 4728 1039 2984 32</text>
					</view>
					<view class="item">
						<text class="label">预约教练：</text>
						<text class="value">有</text>
					</view>
					<view class="item">
						<text class="label">支付方式：</text>
						<text class="value">在线支付 </text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom-bar">
			<view class="content">
				<up-button v-if="true" class="evaluate" text="申请退款" type="primary" :hairline="false" color="#838385"
					shape="circle" :plain="true" @click="goToRefund"></up-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.order-voucher-page {
		min-height: 100vh;
		background: #F6F6F6;

		// 背景图片
		& .bg-img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		// 头部内容
		& .head-box {
			position: relative;
			z-index: 2;

			& .navbar {
				display: flex;
				align-items: center;
				justify-content: center;

				& .back-box {
					position: absolute;
					left: 24rpx;
				}
			}

			// background: #fff;
		}

		// 内容区域
		& .content-box {
			position: relative;
			z-index: 2;
			padding: 0 32rpx;

			// 凭证信息
			& .voucher-info {
				margin-top: 20rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				overflow: hidden;

				& .top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .address-box {
						display: flex;
						align-items: center;

						& text {
							display: block !important;
							width: 440rpx;
							margin-left: 4rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}

					& .status-box {
						padding: 4rpx 12rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #008043;
						background: #E7FFE8;
						border-radius: 4rpx;
					}
				}

				// 场地信息
				& .field-box {
					margin-top: 24rpx;
					display: flex;

					& .pic-box {
						border-radius: 24rpx;
						overflow: hidden;
					}

					& .info {
						margin-left: 20rpx;

						& .name {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						& .type {
							margin-top: 4rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #B7B7B7;
						}

						& .time {
							margin-top: 4rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #B7B7B7;
						}
					}
				}

				// 支付信息
				& .pay-info {
					text-align: right;

					& .label {
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
					}

					& .value {
						font-weight: 500;
						font-size: 36rpx;
						background: linear-gradient(180deg, #21FF2B 0%, #303133 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				// 分割线
				& .split-line {
					position: relative;
					margin-top: 44rpx;
					// border: 1rpx dashed #838385;
					width: 100%;
					height: 4rpx;
					background-image: linear-gradient(to right,
							#E0E0E0 0%,
							#E0E0E0 50%,
							transparent 50%);
					background-size: 40rpx 4rpx; //第一个值（40rpx）越大线条越长间隙越大
					background-repeat: repeat-x;
					opacity: 1;

					&::before {
						content: '';
						position: absolute;
						left: -52rpx;
						top: -20rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #E1F8E1;
					}

					&::after {
						content: '';
						position: absolute;

						top: -20rpx;
						right: -52rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #B5F4E2;
					}
				}

				// 提示信息
				& .tip-box {
					margin-top: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .tip {
						font-weight: 500;
						font-size: 24rpx;
						color: #303133;
					}

					& .time {
						font-weight: 400;
						font-size: 24rpx;
						color: #838385;
					}
				}

				// 二维码
				& .qrcode-box {
					margin-top: 40rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
				}
			}

			// 订单信息
			& .order-info {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .title {
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
				}

				& .info-list {
					padding-top: 12rpx;
					padding-bottom: 8rpx;

					& .item {
						margin-top: 12rpx;
						display: flex;
						align-items: center;

						& .label {
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
						}

						& .value {
							font-weight: 400;
							font-size: 24rpx;
							color: #303133;
						}
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 750rpx;
			height: 158rpx;
			background: #FFFFFF;
			border: 1rpx solid #E9E9EB;

			& .content {
				padding: 12rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&::v-deep .u-button {
					margin-right: 0;
					width: 216rpx;
				}
			}
		}
	}
</style>